<template>
  <el-row v-if="direction === 'row'" class="cmp-container">
    <el-col v-if="title" :span="4" class="label">{{ title }}</el-col>
    <el-col class="content" :span="title?18:24">
      <slot></slot>
    </el-col>
    <el-col :span="2" class="icon-wrapper">
      <slot name="action"></slot>
    </el-col>
  </el-row>
  <el-row v-if="direction === 'column'" class="cmp-container column">
    <el-divider direction="horizontal">
      <div>{{ title }}</div>
    </el-divider>
    <slot></slot>
  </el-row>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  direction: {
    type: String,
    default: () => 'row'
  }
})
</script>
<style lang="scss" scoped>
.cmp-container {
  margin-bottom: 12px;
  display: flex;align-items: center;justify-content: flex-start;
  &.column {
    flex-direction: column;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    & > * {
      width: 100%;
      flex: 0 0 auto !important;
    }
  }
}
.label {
  font-size: 12px;
  display: flex;
  flex-direction: revert;
  align-items: center;
  justify-content: flex-start;
  color: #2c3e50;
  text-align: right;
  text-indent: 0;
}
.content {
  display: flex;
  flex-direction: revert;
  align-items: center;
  justify-content: flex-start;
}
.icon-wrapper{
  color: #c5c5c5;
  &:hover{
    color: #2c3e50;
  }
}
</style>
